<template>
  <div class="songs-container">
    <div class="tab-bar">
      <span class="item" :class="{ active: type == 0 }" @click="type = 0"
        >全部</span
      >
      <span class="item" :class="{ active: type == 7 }" @click="type = 7"
        >华语</span
      >
      <span class="item" :class="{ active: type == 96 }" @click="type = 96"
        >欧美</span
      >
      <span class="item" :class="{ active: type == 8 }" @click="type = 8"
        >日本</span
      >
      <span class="item" :class="{ active: type == 16 }" @click="type = 16"
        >韩国</span
      >
    </div>
    <!-- 底部的table -->
    <div
      class="scrollbox"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
    >
      <vue-scroll :ops="ops" ref="vs">
        <table class="el-table playlit-table">
          <thead>
            <th></th>
            <th></th>
            <th>音乐标题</th>
            <th>歌手</th>
            <th>专辑</th>
            <th>时长</th>
          </thead>
          <tbody>
            <tr
              class="el-table__row"
              v-for="(item, index) in songs"
              :key="index"
              @click="playmusic(item)"
            >
              <td style="width:50px">{{ index + 1 }}</td>
              <td style="width:100px">
                <div class="img-wrap">
                  <img :src="item.album.blurPicUrl" alt />
                  <span class="iconfont icon-play"></span>
                </div>
              </td>
              <td>
                <div class="song-wrap">
                  <div class="name-wrap">
                    <span>{{ item.name }}</span>
                    <span v-if="item.mvid" class="iconfont icon-mv"></span>
                  </div>
                </div>
              </td>
              <td>{{ item.artists[0].name }}</td>
              <td>{{ item.album.name }}</td>
              <td>{{ item.duration | formDate }}</td>
            </tr>
          </tbody>
        </table>
      </vue-scroll>
    </div>
  </div>
</template>

<script>
import { MusicList } from "../../api/music"
export default {
  name: "songs",
  data() {
    return {
      type: 0,
      allsongs: [],
      csongs: [],
      osongs: [],
      rsongs: [],
      hsongs: [],
      songs: [],
      loading: true,
      ops: {
        //vuescroll的配置
        vuescroll: {
          sizeStrategy: "percent",
          detectResize: true,
        },
        scrollPanel: {
          scrollingX: false,
        },
        rail: {},
        bar: {
          showDelay: 500,
          onlyShowBarOnScroll: false,
          keepShow: true,
          background: "#b3c0d1",
          opacity: 1,
          hoverStyle: false,
          specifyBorderRadius: false,
          minSize: false,
          size: "6px",
          disable: false,
        },
      },
    }
  },
  watch: {
    type(newValue, oldValue) {
      this.loading = true
      this.type = newValue
      switch (this.type) {
        case 0:
          if (this.allsongs.length) {
            this.songs = this.allsongs
            this.loading = false
          } else {
            this.getSongs(this.allsongs)
          }
          break
        case 7:
          if (this.csongs.length) {
            this.songs = this.csongs
            this.loading = false
          } else {
            this.getSongs(this.csongs)
          }
          break
        case 96:
          if (this.osongs.length) {
            this.songs = this.osongs
            this.loading = false
          } else {
            this.getSongs(this.osongs)
          }
          break
        case 8:
          if (this.rsongs.length) {
            this.songs = this.rsongs
            this.loading = false
          } else {
            this.getSongs(this.rsongs)
          }
          break
        case 16:
          if (this.hsongs.length) {
            this.songs = this.hsongs
            this.loading = false
          } else {
            this.getSongs(this.hsongs)
          }
      }
    },
  },
  filters: {
    formDate(date) {
      var m = parseInt(date / 1000 / 60)
      if (m < 10) {
        m = "0" + m
      }
      var s = parseInt((date / 1000) % 60)
      if (s < 10) {
        s = "0" + s
      }
      return m + ":" + s
    },
  },
  created() {
    this.getSongs(this.allsongs)
  },
  methods: {
    // 获取排行榜的音乐
    async getSongs(array) {
      const res = await MusicList({
        type: this.type,
      })
      //对请求的数据进行切割,减少数据量
      var result = res.data.slice(0, 30)
      switch (this.type) {
        case 0:
          this.allsongs = result
          break
        case 7:
          this.csongs = result
          break
        case 96:
          this.osongs = result
          break
        case 8:
          this.rsongs = result
          break
        case 16:
          this.hsongs = result
      }
      this.songs = result
      this.loading = false
    },
    // 点击播放歌曲
    async playmusic(item) {
      this.$store.dispatch("getSong", { id: item.id, autoPlay: 1 })
    },
  },
}
</script>
<style lang="scss" scoped>
.songs-container {
  width: 100%;
  height: 100%;
}
.songs-container .tab-bar {
  height: 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.tab-bar .item {
  font-size: 15px;
  color: gray;
  margin-right: 20px;
  cursor: pointer;
}

.songs-container .tab-bar .item.active {
  color: rgb(98, 158, 218);
}
.songs-container .scrollbox {
  height: calc(100% - 50px) !important;
  position: relative;
}
.songs-container .scrollbox .el-table {
  margin: 0px 20px;
  width: calc(100% - 40px);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
tr {
  transition: 0.5s;
}
tr:hover {
  //   background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  color: rgb(98, 158, 218);
  border-bottom: 1px solid rgb(98, 158, 218);
}
td {
  border: none;
}
.songs-container .song-table .song-wrap > span {
  margin-top: 20px;
  display: inline-block;
  color: #bebebe;
}

.songs-container .song-table .song-wrap .icon-mv {
  padding-left: 5px;
  color: rgb(98, 158, 218);
}

.img-wrap {
  position: relative;
  width: 70px;
  height: 70px;
}

.img-wrap img {
  width: 70px;
  height: 70px;
  border-radius: 5px;
}

.img-wrap .icon-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  color: rgb(98, 158, 218);
  font-size: 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
  opacity: 0;
  transition: 0.5s;
}

.icon-play::before {
  transform: translateX(1px);
}
tr:hover .icon-play {
  opacity: 1;
}

.active {
  color: rgb(98, 158, 218);
}
</style>
